<template>
  <!-- 注册内容 -->
  <div class="register">
    <h3>
      注册新用户
      <span class="go">我有账号，去 <a href="/login">登陆</a> </span>
    </h3>
    <ValidationObserver v-slot="{ handleSubmit }">
      <form @submit.prevent="handleSubmit(onSubmit)">
        <!-- 手机号 -->
        <ValidationProvider
          mode="lazy"
          tag="div"
          class="content"
          rules="requiredPhone|phoneNum"
          v-slot="{ errors }"
        >
          <label>手机号:</label>
          <input
            type="text"
            placeholder="请输入你的手机号"
            v-model="user.phone"
          />
          <span class="error-msg">{{ errors[0] }}</span>
        </ValidationProvider>
        <!-- 验证码 -->
        <ValidationProvider
          mode="lazy"
          tag="div"
          class="content"
          rules="requiredCode|digits:6"
          v-slot="{ errors }"
        >
          <label>验证码:</label>
          <input type="text" v-model="user.code" placeholder="请输入验证码" />
          <input
            type="button"
            style="width: 100px; cursor: pointer"
            value="获取验证码"
            @click="getVerifyCode"
            :disabled="isTimeZt"
          />
          <span class="error-msg">{{ errors[0] }}</span>
        </ValidationProvider>
        <!-- 登录密码 -->
        <ValidationProvider
          name="pass"
          mode="lazy"
          tag="div"
          class="content"
          rules="requiredPassword|passNum"
          v-slot="{ errors }"
        >
          <label>登录密码:</label>
          <input
            type="text"
            placeholder="请输入你的登录密码"
            v-model="user.password"
          />
          <span class="error-msg">{{ errors[0] }}</span>
        </ValidationProvider>
        <!-- 确认登入密码 -->
        <ValidationProvider
          mode="lazy"
          tag="div"
          class="content"
          rules="requiredRePass|rePassNum:@pass"
          v-slot="{ errors }"
        >
          <label>确认密码:</label>
          <input
            v-model="user.rePassword"
            type="text"
            placeholder="请输入确认密码"
          />
          <span class="error-msg">{{ errors[0] }}</span>
        </ValidationProvider>
        <!-- 是否同意协议 -->
        <ValidationProvider
          mode="lazy"
          tag="div"
          class="controls"
          rules="requiredAgree"
          v-slot="{ errors }"
        >
          <input v-model="user.isAgree" name="m1" type="checkbox" />
          <span>同意协议并注册《尚品汇用户协议》</span>
          <span class="error-msg">{{ errors[0] }}</span>
        </ValidationProvider>
        <!-- 提交 -->
        <div class="btn">
          <button>完成注册</button>
        </div>
      </form>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationObserver, ValidationProvider, extend } from "vee-validate"
// 引入vee-validate插件中的一个内置规则项
import { required, digits } from "vee-validate/dist/rules"
// 引入校验规则'
import { phoneNumReg, codeNumReg, passNumReg } from "@/utils/reg"
// 获取验证码
import { reqGetVerifyCode, reqUserRegister } from "@/api/index"
// 验证手机号
extend("requiredPhone", {
  ...required,
  message: "手机号不能为空!!!",
})
extend("phoneNum", {
  validate(value) {
    return phoneNumReg.test(value)
  },
  message: "手机号码格式不正确!!!",
})
// 验证验证码
extend("requiredCode", {
  ...required,
  message: "验证码不能为空!!!",
})
extend("digits", {
  ...digits,
  message: "验证码格式不正确!!!",
})
// extend("codeNum", {
// validate(value) {
//   return codeNumReg.test(value)
// },
// message: "验证码格式不正确!!!",
// })
// 验证密码
extend("requiredPassword", {
  ...required,
  message: "密码不能为空!!!",
})
extend("passNum", {
  validate(value) {
    return passNumReg.test(value)
  },
  message: "密码格式不正确!!!",
})
// 确认密码验证
extend("requiredRePass", {
  ...required,
  message: "确认密码不能为空!!!",
})
extend("rePassNum", {
  params: ["password"],
  validate(value, { password }) {
    return value === password
  },
  message: "两次密码不相同!!!",
})
// 是否同意协议
extend("requiredAgree", {
  validate(value) {
    return value
  },
  message: "请勾选协议!!!",
})
export default {
  name: "Register",
  data() {
    return {
      user: {
        phone: "", //手机号
        password: "", //密码
        rePassword: "", //确认密码
        code: "", //验证码
        isAgree: false, // 是否同意协议
      },
      timeId: "",
      isTimeZt: false,
    }
  },
  components: { ValidationObserver, ValidationProvider },
  methods: {
    async onSubmit() {
      // alert("验证成功....")
      let { phone, password, code } = this.user
      const result = await reqUserRegister({ phone, password, code })
      if (result.code === 200) {
        console.log("注册请求发送成功")
        // alert("注册成功!")
        this.$message.success("恭喜您注册成功")
        this.$router.push("/login")
      } else {
        this.$message.error(result.message)
        console.log("注册请求失败")
      }
    },
    // 获取验证码
    async getVerifyCode(e) {
      // if ((this.user, phone)) {
      //   alert("请输入手机号")
      //   const result = await reqGetVerifyCode(this.user.phone)
      //   if (result.code === 200) {
      //     console.log("获取验证码成功")
      //   } else {
      //     console.log("获取验证码失败")
      //   }
      // }
      if (!this.user.phone) return alert("请输入手机号")
      let num = 3
      this.timeId = setInterval(() => {
        num--
        this.isTimeZt = true
        if (num == 0) {
          clearInterval(this.timeId)
          e.target.value = "获取验证码"
          this.isTimeZt = false
          return
        }
        e.target.value = num + "秒后可重新发送"
      }, 1000)
      const result = await reqGetVerifyCode(this.user.phone)
      if (result.code === 200) {
        console.log("获取验证码成功")
        this.user.code = result.data
      } else {
        console.log("获取验证码失败")
      }
    },
  },
}
</script>

<style lang="less" scoped>
.register {
  width: 1200px;
  height: 445px;
  border: 1px solid rgb(223, 223, 223);
  margin: 0 auto;

  h3 {
    background: #ececec;
    margin: 0;
    padding: 6px 15px;
    color: #333;
    border-bottom: 1px solid #dfdfdf;
    font-size: 20.04px;
    line-height: 30.06px;

    span {
      font-size: 14px;
      float: right;

      a {
        color: #e1251b;
      }
    }
  }

  div:nth-of-type(1) {
    margin-top: 40px;
  }

  .content {
    padding-left: 390px;
    margin-bottom: 18px;
    position: relative;

    label {
      font-size: 14px;
      width: 96px;
      text-align: right;
      display: inline-block;
    }

    input {
      width: 270px;
      height: 38px;
      padding-left: 8px;
      box-sizing: border-box;
      margin-left: 5px;
      outline: none;
      border: 1px solid #999;
    }

    img {
      vertical-align: sub;
    }

    .error-msg {
      position: absolute;
      top: 100%;
      left: 495px;
      color: red;
    }
  }

  .controls {
    text-align: center;
    position: relative;

    input {
      vertical-align: middle;
    }

    .error-msg {
      position: absolute;
      top: 100%;
      left: 495px;
      color: red;
    }
  }

  .btn {
    text-align: center;
    line-height: 36px;
    margin: 17px 0 0 55px;

    button {
      outline: none;
      width: 270px;
      height: 36px;
      background: #e1251b;
      color: #fff !important;
      display: inline-block;
      font-size: 16px;
    }
  }
}

.copyright {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 24px;

  ul {
    li {
      display: inline-block;
      border-right: 1px solid #e4e4e4;
      padding: 0 20px;
      margin: 15px 0;
    }
  }
}
</style>
